<template>
  <transition name="popup">
    <div v-if="visible" class="marker-popup-overlay" @click="handleOverlayClick">
      <div class="marker-popup" @click.stop>
        <div class="popup-header">
          <h3 class="popup-title">{{ markerData.name }}</h3>
          <button class="close-btn" @click="close">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
              <path d="M18 6L6 18M6 6L18 18" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
            </svg>
          </button>
        </div>
        
        <div class="popup-content">
          <div v-if="markerData.image" class="popup-image">
            <img :src="markerData.image" style="object-fit: contain;" :alt="markerData.name" />
          </div>
          
          <div class="popup-info">
            <!-- <div v-if="markerData.type" class="marker-type">
              <span class="type-badge" :class="`type-${markerData.type}`">
                {{ getTypeText(markerData.type) }}
              </span>
            </div> -->
            
            <div v-if="markerData.description" class="description">
              <p>{{ markerData.description }}</p>
            </div>
            
            <div v-if="markerData.features && markerData.features.length" class="features">
              <h4>特色亮点</h4>
              <ul>
                <li v-for="feature in markerData.features" :key="feature">
                  {{ feature }}
                </li>
              </ul>
            </div>
            
            <div v-if="markerData.openTime" class="open-time">
              <h4>开放时间</h4>
              <p>{{ markerData.openTime }}</p>
            </div>
            
            <div v-if="markerData.tips" class="tips">
              <h4>游玩提示</h4>
              <p>{{ markerData.tips }}</p>
            </div>
            
            <div v-if="markerData.rating" class="rating">
              <div class="rating-stars">
                <span v-for="i in 5" :key="i" class="star" :class="{ 'filled': i <= Math.floor(markerData.rating) }">
                  ★
                </span>
                <span class="rating-text">{{ markerData.rating }}/5.0</span>
              </div>
            </div>
          </div>
        </div>
        
        <div class="popup-actions" v-if="markerData.actions">
          <button 
            v-for="action in markerData.actions" 
            :key="action.text"
            class="action-btn"
            :class="action.type || 'default'"
            @click="handleAction(action)"
          >
            {{ action.text }}
          </button>
        </div>
      </div>
    </div>
  </transition>
</template>

<script>
export default {
  name: 'MarkerPopup',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    markerData: {
      type: Object,
      default: () => ({})
    }
  },
  methods: {
    close() {
      this.$emit('close')
    },
    
    handleOverlayClick() {
      this.close()
    },
    
    handleAction(action) {
      this.$emit('action', action)
      if (action.closeAfter !== false) {
        this.close()
      }
    },
    
    getTypeText(type) {
      const typeMap = {
        'default': '景点',
        'highlight': '热门景点',
        'restaurant': '餐厅',
        'viewpoint': '观景点',
        'facility': '设施服务'
      }
      return typeMap[type] || '景点'
    }
  }
}
</script>

<style lang="scss" scoped>
.marker-popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
}

.marker-popup {
  background: white;
  border-radius: 16px;
  max-width: 400px;
  width: 100%;
  max-height: 80vh;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
}

.popup-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 20px 0;
  
  .popup-title {
    font-size: 20px;
    font-weight: 700;
    color: #333;
    margin: 0;
  }
  
  .close-btn {
    width: 32px;
    height: 32px;
    border: none;
    background: #f5f5f5;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #666;
    transition: all 0.3s ease;
    
    &:hover {
      background: #e0e0e0;
      color: #333;
    }
  }
}

.popup-content {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  
  .popup-image {
    margin-bottom: 16px;
    border-radius: 8px;
    overflow: hidden;
    
    img {
      width: 100%;
      height: 200px;
      object-fit: cover;
    }
  }
  
  .marker-type {
    margin-bottom: 12px;
    
    .type-badge {
      display: inline-block;
      padding: 4px 12px;
      border-radius: 12px;
      font-size: 12px;
      font-weight: 600;
      
      &.type-default {
        background: #e3f2fd;
        color: #1976d2;
      }
      
      &.type-highlight {
        background: #ffebee;
        color: #d32f2f;
      }
      
      &.type-restaurant {
        background: #e8f5e8;
        color: #2e7d32;
      }
      
      &.type-viewpoint {
        background: #f3e5f5;
        color: #7b1fa2;
      }
      
      &.type-facility {
        background: #fff3e0;
        color: #f57c00;
      }
    }
  }
  
  .description {
    margin-bottom: 16px;
    
    p {
      color: #666;
      line-height: 1.6;
      margin: 0;
    }
  }
  
  .features, .open-time, .tips {
    margin-bottom: 16px;
    
    h4 {
      font-size: 14px;
      font-weight: 600;
      color: #333;
      margin: 0 0 8px 0;
    }
    
    ul {
      margin: 0;
      padding-left: 16px;
      
      li {
        color: #666;
        line-height: 1.5;
        margin-bottom: 4px;
      }
    }
    
    p {
      color: #666;
      line-height: 1.6;
      margin: 0;
    }
  }
  
  .rating {
    .rating-stars {
      display: flex;
      align-items: center;
      gap: 4px;
      
      .star {
        color: #ddd;
        font-size: 16px;
        
        &.filled {
          color: #ffd700;
        }
      }
      
      .rating-text {
        margin-left: 8px;
        color: #666;
        font-size: 14px;
      }
    }
  }
}

.popup-actions {
  padding: 0 20px 20px;
  display: flex;
  gap: 12px;
  
  .action-btn {
    flex: 1;
    height: 44px;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    
    &.default {
      background: #f5f5f5;
      color: #333;
      
      &:hover {
        background: #e0e0e0;
      }
    }
    
    &.primary {
      background: #1976d2;
      color: white;
      
      &:hover {
        background: #1565c0;
      }
    }
    
    &.secondary {
      background: #4caf50;
      color: white;
      
      &:hover {
        background: #43a047;
      }
    }
  }
}

// 动画效果
.popup-enter-active, .popup-leave-active {
  transition: all 0.3s ease;
}

.popup-enter-from, .popup-leave-to {
  opacity: 0;
  transform: scale(0.9);
}

.popup-enter-to, .popup-leave-from {
  opacity: 1;
  transform: scale(1);
}

// 移动端适配
@media (max-width: 768px) {
  .marker-popup-overlay {
    padding: 10px;
    align-items: flex-end;
  }
  
  .marker-popup {
    max-height: 90vh;
    border-radius: 16px 16px 0 0;
  }
  
  .popup-header {
    padding: 16px 16px 0;
    
    .popup-title {
      font-size: 18px;
    }
  }
  
  .popup-content {
    padding: 16px;
    
    .popup-image img {
      height: 160px;
    }
  }
  
  .popup-actions {
    padding: 0 16px 16px;
    
    .action-btn {
      height: 40px;
      font-size: 13px;
    }
  }
}
</style>
